<template>
  <div>
    <!-- <contact></contact> -->
    <!-- <activity></activity> -->
    <!-- 轮播 -->
    <el-carousel :interval="5000" :height="imgHeight + 'px'" arrow="always" class="banner">
      <el-carousel-item v-for="item in bannerList" :key="item.id">
        <div class="banner_box">
          <div class="banner_box_bg">
            <img class="banner_bg" :src="item.bg" />
          </div>
          <div class="container">
            <a @click="bannerJump(item.jumpUrl)">
              <img ref="image" :src="item.url" class="image_banner" />
            </a>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <!-- 超大应用内测分发 -->
    <section class="container" v-if="hasLogin">
      <el-row :gutter="20" class="row-bg" justify="space-around">
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-for="(item, index) in appObject" :key="index">
          <div class="test grid-content bg-purple animated">
            <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
              <div class="app-img">
                <img :src="item.appUrl" alt="" class="" />
              </div>
            </el-col>
            <el-col :xs="19" :sm="19" :md="19" :lg="19" :xl="19">
              <div class="app-title1">{{ item.title }}</div>
              <div class="app-text1">{{ item.text }}</div>
            </el-col>
          </div>
        </el-col>
      </el-row>
    </section>
    <!-- 在线签名APP -->
    <section class="container wow animated fadeInDown" data-wow-delay="1s" data-wow-duration="1s" v-if="hasLogin">
      <div class="title wow animated">
        <div class="title1">在线签名APP</div>
        <div class="title2 wow animated">(只要一个IPA文件，5分钟极速签名)</div>
      </div>
      <div class="linebox">
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="{ span: '4-8' }" v-for="(item, index) in lineAppList" :key="index">
            <div class="flex flex-column align-center wow animated">
              <img class="line_item_img wow animated bounceInDown" :src="item.appUrl" alt="" />
              <div class="app-title wow animated bounceInRight">
                {{ item.title }}
              </div>
              <div class="app-text1 text-center wow animated bounceInUp">
                <p v-html="item.text"></p>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <a @click="goUrl('/signatureSuper', 'signatureSuper')">
        <div class="signature wow animated">
          <div class="at-once">立即签名</div>
        </div>
      </a>
    </section>
    <!-- IOS企业证书签名 -->
    <section class="container wow animated fadeInDown" data-wow-delay="1s" v-if="hasLogin">
      <div class="title wow animated">
        <div class="title1">IOS企业证书签名</div>
        <div class="title2 wow animated">
          (无需上架，免越狱安装，不限制iOS设备，无限制安装)
        </div>
      </div>
      <el-row :gutter="20" class="row-bg" justify="space-around">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" v-for="(item, index) in iosObject" :key="index">
          <div class="contentbox grid-content bg-purple wow animated lightSpeedIn">
            <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
              <img :src="item.iosUrl" alt="" />
            </el-col>
            <el-col :xs="21" :sm="21" :md="21" :lg="21" :xl="21">
              <div class="app-title2">{{ item.title }}</div>
              <div class="app-text2">7*{{ item.text }}</div>
            </el-col>
          </div>
        </el-col>
      </el-row>
      <a @click="goUrl('/adhibition', 'adhibition')">
        <div class="signature wow animated">
          <div class="more">了解更多</div>
        </div>
      </a>
    </section>
    <!-- 内测发布上传 -->
    <section class="container wow animated fadeInDown" data-wow-delay="1s">
      <div class="title wow animated">
        <div class="title1">内测发布上传</div>
        <div class="title2 wow animated">
          (一键上传APP安装包，提供短链接和下载二维码，方便用户下载测试)
        </div>
      </div>
      <el-row :gutter="20" class="row-bg" justify="space-around">
        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" v-for="(item, index) in inferObject" :key="index">
          <div class="grid-content bg-purple one_item animated">
            <img :src="item.inferUrl" alt="" />
            <div class="one_item_title">{{ item.title }}</div>
          </div>
        </el-col>
      </el-row>
      <a @click="goApplicationAddUrl()">
        <div class="signature wow animated">
          <div class="more" style="margin-top: 20px">立即发布</div>
        </div>
      </a>
    </section>
    <!-- 数量 -->
    <section class="wow animated fadeInDown">
      <div class="num_box">
        <img class="num_box_img" :src="url" alt="" />
        <div class="num_num">
          <div class="num_num_item wow animated">
            <div class="num_num_content">35897</div>
            <div class="num_num_title">累计在线签名</div>
          </div>
          <div class="num_num_item wow animated">
            <div class="num_num_content">198087</div>
            <div class="num_num_title">累计内测分发APP</div>
          </div>
          <div class="num_num_item wow animated">
            <div class="num_num_content">4380773</div>
            <div class="num_num_title">累计内测下载APP</div>
          </div>
        </div>
      </div>
    </section>
    <!-- 合作伙伴 -->
    <!-- <section class="container wow animated fadeInDown" data-wow-delay="1s">
      <div class="title wow animated">
        <div class="title1">合作伙伴</div>
      </div>
      <el-row :gutter="20" class="row-bg" justify="space-around" style="margin-bottom: 80px">
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" v-for="(item, index) in appList" :key="index">
          <div class="grid-content bg-purple teamworkbox wow animated">
            <img :src="item.Url" alt="" />
          </div>
        </el-col>
      </el-row>
    </section> -->
  </div>
</template>

<script>
  import activity from "@/components/Yee/Yee"; //弹窗组件
  import contact from "@/components/common/contact"; //浮动窗体
  import {
    WOW
  } from "wowjs"; //动画
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      activity,
      contact,
    },
    data() {
      //这里存放数据
      return {
        src: "../../../static/首页banner.png",
        url: "../../../static/home/组 3159.png",
        hand: '',
        imgHeight: "",
        hasLogin: false,
        bannerList: [],
        appObject: [{
            appUrl: "../../../static/超大应用内测分发.png",
            title: "超大应用内测分发",
            text: "支持超大APP上传，生成下载链接和二维码",
          },
          {
            appUrl: "../../../static/企业签名.png",
            title: "企业签名",
            text: "免越狱无限制安装，无需上架苹果商店，长久稳定",
          },
          {
            appUrl: "../../../static/内测分发.png",
            title: "内测分发",
            text: "支持超大APP上传，生成下载链接和二维码",
          },
        ],
        lineAppList: [{
            appUrl: "../../../static/快速.png",
            title: "快速",
            text: "七牛云CND极速<br>上传国外G口极速下载",
          },
          {
            appUrl: "../../../static/免费试用.png",
            title: "免费试用",
            text: "任何一款APP都可测试<br>签名方便用户测试",
          },
          {
            appUrl: "../../../static/自助式.png",
            title: "自助式",
            text: "在线自助操作点点鼠标<br>即可在线签名APP",
          },
          {
            appUrl: "../../../static/证书多.png",
            title: "证书多",
            text: "提供3个独立证书签名<br>备用5个证书替换",
          },
          {
            appUrl: "../../../static/主动适配.png",
            title: "主动适配",
            text: "适配安卓和苹果的主流机<br>型均可在线内测分发",
          },
        ],
        iosObject: [{
            iosUrl: "../../../static/home/24小时全自动签名.png",
            title: "24小时全自动签名",
            text: "7*24小时全自动企业证书签名，随时随地上传APP，即可签名",
          },
          {
            iosUrl: "../../../static/home/mianqian.png",
            title: "有效期内免费重签",
            text: "只要在有效期内，APP企业签名更新，均为免费",
          },
          {
            iosUrl: "../../../static/home/push.png",
            title: "消息推送",
            text: "给已安装APP的用户推送消息或通知，提高APP的活跃",
          },
          {
            iosUrl: "../../../static/home/guanfang.png",
            title: "官方证书，安全稳定",
            text: "拥有国内外官方企业签名证书，专业的开发团队，分类签名，将保证APP企业签名的安全稳定",
          },
        ],
        inferObject: [{
            inferUrl: "../../../static/4.png",
            title: "注册账号后每天免费下载次数",
          },
          {
            inferUrl: "../../../static/大.png",
            title: "1.5G以内大包且支持一包多传",
          },
          {
            inferUrl: "../../../static/优.png",
            title: "一码二用 自动识别不同机型",
          },
          {
            inferUrl: "../../../static/势.png",
            title: "提供多套下载模板以及APP官网模板",
          },
        ],
        appList: [{
            Url: "../../../static/home/logo_tuniu@2x.png",
          },
          {
            Url: "../../../static/home/logo_zhongtong@2x.png",
          },
          {
            Url: "../../../static/home/logo_toutiao@2x.png",
          },
          {
            Url: "../../../static/home/logo_zhaoshangyinhang@2x.png",
          },

          {
            Url: "../../../static/home/logo_YOUDAOYUN@2x.png",
          },
          {
            Url: "../../../static/home/logo_weipinhui@2x.png",
          },
          {
            Url: "../../../static/home/logo_JINdong@2x.png",
          },
          {
            Url: "../../../static/home/logo_Shengzhenghangkong@2x.png",
          },
        ],
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {

      imgLoad() {
        this.$nextTick(function () {
          // 获取窗口宽度*图片的比例，定义页面初始的轮播图高度
          // this.imgHeight = (document.body.clientWidth * 1) / 4.;
          this.imgHeight = 400;
        });
      },
      //跳转路由
      goUrl(path, name) {
        this.$router.push({
          path: path,
          name: name,
        });
        if (name == "adhibition") {
          window.scrollTo(0, 0);
          sessionStorage.setItem("currentTab_title", name);
          location.reload();
        }
      },
      //跳转路由
      goApplicationAddUrl() {
        this.$router.push({
          path: "adhibition",
          name: "adhibition",
        });

        window.scrollTo(0, 0);
        sessionStorage.setItem("currentTab_title", "adhibition");
        sessionStorage.setItem("currentTab", "first");
        location.reload();
      },
      //banner跳转
      bannerJump(keyid) {
        if (keyid == "/adhibition") {
          this.goApplicationAddUrl();
        } else if (keyid == "/register") {
          this.$router.push({
            path: "/register",
            name: "register",
          });
        } else if (keyid == "") {}
      },

      //处理登录后，隐藏banner部分内容
      changeBannerList(msg) {
        // A发送来的消息
        if (msg == 1) {
          this.bannerList = [{
              id: 1,
              url: "../../../static/home/banner/组 3136.png",
              bg: "../../../static/home/banner/组 3137.png",
              jumpUrl: "/adhibition",
              jumpName: "adhibition",
            },
            {
              id: 2,
              url: "../../../static/home/banner/组 3140.png",
              bg: "../../../static/home/banner/组 3138.png",
              jumpUrl: "",
              jumpName: "",
            },
            // {
            //   id: 3,
            //   url: "../../../static/home/banner/content_3.png",
            //   bg: "../../../static/home/banner/bg_3.png",
            //   jumpUrl: "",
            //   jumpName: "",
            // },
            // {
            //   id: 4,
            //   url: "../../../static/home/banner/content_5.png",
            //   bg: "../../../static/home/banner/bg_5.jpg",
            //   jumpUrl: "",
            //   jumpName: "",
            // },
          ];
        } else {
          this.bannerList = [
            // {
            //   id: 0,
            //   url: "../../../static/home/banner/content_4.png",
            //   bg: "../../../static/home/banner/bg_4.png",
            //   jumpUrl: "/register",
            //   jumpName: "register",
            // },
            {
              id: 1,
              url: "../../../static/home/banner/组 3136.png",
              bg: "../../../static/home/banner/组 3137.png",
              jumpUrl: "/adhibition",
              jumpName: "adhibition",
            },
            {
              id: 2,
              url: "../../../static/home/banner/组 3140.png",
              bg: "../../../static/home/banner/组 3138.png",
              jumpUrl: "",
              jumpName: "",
            },
            // {
            //   id: 3,
            //   url: "../../../static/home/banner/content_3.png",
            //   bg: "../../../static/home/banner/bg_3.png",
            //   jumpUrl: "",
            //   jumpName: "",
            // },
            // {
            //   id: 4,
            //   url: "../../../static/home/banner/content_5.png",
            //   bg: "../../../static/home/banner/bg_5.jpg",
            //   jumpUrl: "",
            //   jumpName: "",
            // },
          ];
        }
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.imgLoad();
      setTimeout(() => {
        this.imgHeight = this.$refs.image[0].height;
      }, 500);

      //判断是否已经登录了
      var token_time = sessionStorage["token_time"];
      token_time = parseInt(token_time);
      token_time = token_time + 3600000;
      var now = new Date().getTime();
      if (token_time < now || token_time == undefined || isNaN(token_time)) {
        console.log("未登录");
        this.hasLogin = false;
        this.changeBannerList(0);
        return;
      } else {
        this.changeBannerList(1);
        this.hasLogin = true;
      }
      //添加事件总线
      this.$EventBus.$on("userLogined", (msg) => {
        this.changeBannerList(msg);
      });
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      document
        .querySelector("body")
        .setAttribute("style", "background-color:#f7fafe");
      // 监听窗口变化，使得轮播图高度自适应图片高度
      window.addEventListener("resize", () => {
        this.imgHeight = this.$refs.image[0].height;
        // console.log(this.imgHeight);
      });
      this.$nextTick(() => {
        let wow = new WOW({
          live: false,
        });
        wow.init();
      });
    },
    beforeDestroy() {
      document.querySelector("body").removeAttribute("style");
    },
  };

</script>
<style scoped>
  /* 动画效果 */
  .one_item:hover {
    -webkit-animation-name: pulse;
    animation-name: pulse;
  }

  .num_num_item:hover {
    -webkit-animation-name: pulse;
    animation-name: pulse;
  }

  .contentbox:hover {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
  }

  .test:hover {
    -webkit-animation-name: pulse;
    animation-name: pulse;
  }

  .teamworkbox:hover {
    -webkit-animation-name: swing;
    animation-name: swing;
  }

  /* 五等分 */
  @media (max-width: 768px) {
    .el-col-lg-4-8 {
      width: 100%;
    }

    .num_box {
      display: none;
    }
  }

  @media (min-width: 768px) {
    .el-col-lg-4-8 {
      width: 50%;
    }

    .num_box {
      display: none;
    }
  }

  @media (min-width: 980px) {
    .el-col-lg-4-8 {
      width: 20%;
    }

    .num_box {
      display: block;
    }
  }

  a:hover {
    cursor: pointer;
  }

  /* banner */
  .banner {
    background-color: white;
  }

  /* 顶部banner内容 */
  .banner_box {
    position: relative;
  }

  .banner_box_bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    /* height: 400px; */
  }

  .banner_bg {
    width: 100%;
    height: 100%;

    /* background-color: black; */
  }

  .image_banner {
    width: 100%;
    z-index: 999;
  }

  /* 轮播 */
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 400px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }

  /* 超大应用内测分发 */
  .test {
    background: #ffffff;
    box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    margin: 30px 0px 0px 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .app-img {
    width: 70px;
    height: 70px;
    margin: 25px 10px;
  }

  .app-title {
    font-family: PingFang-SC-Regular, PingFang-SC;
    /* font-weight: bold; */
    font-size: 24px;
    margin-top: 20px;
  }

  .app-title1 {
    font-family: PingFang-SC-Regular, PingFang-SC;
    font-size: 18px;
  }

  .app-text1 {
    font-family: PingFang-SC-Regular, PingFang-SC;
    font-size: 14px;
    color: #949494;
  }

  /* 标题 */
  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 80px 0px 40px 0px;
    font-family: "苹方-简 中黑体";
  }

  .title1 {
    font-size: 40px;
  }

  .title2 {
    font-size: 20px;
    color: #a5a5a5;
  }

  /* 在线APP签名 */
  .linebox {
    /* width: 1180px; */
    /* height: 324px; */
    background: #ffffff;
    box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding-bottom: 20px;
  }

  .line_item_img {
    margin-top: 20px;
  }

  a {
    text-decoration: none;
  }

  /* 立即签名 */
  .at-once {
    width: 1180px;
    height: 40px;
    background: #358df6;
    border-radius: 0px 0px 4px 4px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 16px;
  }

  .signature {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* IOS企业认证 */
  .contentbox {
    background: #ffffff;
    box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    margin: 0px 0px 21px 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .contentbox img {
    margin: 20px 0px 20px 0px;
  }

  .app-title2 {
    font-family: "苹方-简 常规体";
    font-size: 18px;
    margin: 15px 0px 0px 0px;
  }

  .app-text2 {
    font-family: "苹方-简 常规体";
    font-size: 12px;
    color: #949494;
    margin: 0px 0px 10px 0px;
  }

  /* 内测发布上传 */
  .one_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    min-height: 320px;
  }

  .one_item img {
    margin: 43px 95px 14px 95px;
  }

  .one_item_title {
    font-size: 28px;
    margin: 0px 35px 0px 35px;
  }

  /* 数据展示 */
  .num_box {
    width: 100%;
    position: relative;
    margin-top: 80px;
  }

  .num_box_img {
    width: 100%;
  }

  .num_num {
    margin-left: 20%;
    margin-bottom: 75px;
    width: 60%;
    position: absolute;
    bottom: 0px;
    display: flex;
    justify-content: space-between;
  }

  .num_num_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333333;
  }

  .num_num_content {
    font-size: 44px;
    font-weight: bold;
  }

  .num_num_title {
    font-size: 20px;
  }

  /* 合作伙伴 */
  .teamworkbox {
    background: #ffffff;
    box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .music {
    width: 215px;
    height: 75px;
  }

  .teamworkbox img {
    width: 80%;
    margin: 28px 34px 28px 31px;
  }

  /* 了解更多 */
  .more {
    width: 1180px;
    height: 40px;
    background: #358df6;
    border-radius: 4px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 16px;
  }

  @media (max-width: 414px) {
    .app-title2 {
      margin-left: 8px;
      margin-top: 5px;
    }

    .app-text2 {
      margin-top: 5px;
      margin-left: 8px;
    }

    .one_item {
      margin-bottom: 20px;
    }
  }

</style>
